<template>
  <!--  <audio src="/mp3/bgm.mp3" autoplay loop></audio>-->
  <el-header class="el-header">
    <div class="header-menu">
      <div class="header-item"
           v-for="(item, index) in headerMenu"
           v-bind:key="index"
           :class="{ 'active': activeIndex === index }"
           @click="handleClick(item.to, index)"

      >
        {{ item.label }}
      </div>
    </div>
  </el-header>
  <div class="main-content" id="main-content">
    <router-view></router-view>
  </div>
  <el-footer>
    footer
  </el-footer>

</template>

<script setup>
import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'

onMounted(() => {

})

const router = useRouter()
const activeIndex = ref(1)

const headerMenu = ref([
  {
    label: '首页',
    icon: 'el-icon-s-home',
    to: '/'
  },
  {
    label: '定时任务',
    icon: 'el-icon-s-timer',
    to: '/scheduled-task'
  },
  {
    label: '关于',
    icon: 'el-icon-s-custom',
    to: '/about'
  },
  {
    label: '我的音乐',
    icon: 'el-icon-s-music',
    to: '/music'
  }
])

/**
 * 路由跳转
 * @param to
 * @param index
 */
const handleClick = (to, index) => {
  if (to) {
    router.push(to)
  }
  activeIndex.value = index
}
</script>

<style lang="scss">
.el-header {
  display: flex;
  justify-content: right;
  align-content: center;
  height: 80px;

  .header-menu {
    display: flex;

    .header-item {
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      margin: 0 15px; /* 可选：设置菜单项之间的间距 */
      font-size: 16px;
      cursor: pointer;
      width: 70px;
    }
    .header-item:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
}

.main-content {
  height: calc(100vh - 120px - 30px);
  width: 100%;
  display: inline-flex;
  border-top: #cccccc 2px solid;
  border-bottom: #cccccc 2px solid;
  margin: 0px;

  .avatar {
    height: 150px;
    width: 150px;
    border: #000000 2px solid;
    border-radius: 50%;
  }


  .image-table {
    .image-list {
      display: flex;
      flex-wrap: wrap; /* 允许换行 */
      gap: 10px; /* 项目之间的间距 */
    }

    .image-item {
      width: 100px;
      height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}


</style>
